<template>
  <div class="table_wrapper" :style="{ height: tableHeight + 'px' }">
    <!-- 配置说明 -->
    <!-- 
      tableHeaderStyle：表头样式
      highlight-current-row：单选高亮行
      row-key：折叠行的唯一标记
      tableConfig:{
        typeName: 'multiple', //多选:multiple 单选:single 展开行:expand
        stripe: false, //是否为斑马纹 table
        border: false, //是否带有纵向边框
        defaultSort: {prop:'age',order:''} //默认的排序 prop:指定排序的属性 order:排序顺序
      }
    -->

    <!-- 顶部按钮 -->
    <div class="tabBtn" v-if="tableData.mainBtn || tableData.btnGroup">
      <el-button class="btnName" v-if="tableData.mainBtn.visible" type="primary" size="small"
        @click="tableData.mainBtn.click" :icon="tableData.mainBtn.icon">
        {{ tableData.mainBtn.label }}
      </el-button>
      <div v-if="tableData.btnGroup" style="margin-left:20px;">
        <template v-for="(itemBtn, inde) in tableData.btnGroup">
          <el-button class="btnName" v-if="itemBtn.visible" :key="'1q' + inde" size="small" @click="itemBtn.click"
            :icon="itemBtn.icon">
            {{ itemBtn.label }}
          </el-button>
        </template>
      </div>
    </div>

    <!-- table -->
    <el-table ref="table" fit header-cell-class-name="tableHeaderStyle" :data="tableData.data"
      :height="tableConfig && tableConfig.height" v-loading="tableData.loading"
      :tree-props="tableConfig && tableConfig.treeProps" :row-key="(row) => { return row.id }"
      :expand-row-keys="expandRowKeys" @expand-change="expandChange" :stripe="tableConfig && tableConfig.stripe"
      :border="tableConfig && tableConfig.border" :default-sort="tableConfig && tableConfig.defaultSort"
      :highlight-current-row="tableConfig && tableConfig.typeName == 'single'" @row-click="handleRowSelect"
      @selection-change="selectAll">
      <!-- 单选 -->
      <!-- <el-table-column v-if="tableConfig.typeName =='single'" width="65" align="center">
        <template slot-scope="scope">    
          <div class="radio" :class="scope.row.isChecked?'singleChoice':''"></div>
        </template>
      </el-table-column> -->
      <!-- 多选 -->
      <el-table-column v-if="tableConfig.typeName == 'multiple'" type="selection" width="65" align="center">
      </el-table-column>
      <!-- 展开行 -->
      <el-table-column v-if="tableConfig.typeName == 'expand'" type="expand" width="60" align="center">
        <template slot-scope="scope">
          <slot name="expand" :row="scope.row"></slot>
        </template>
      </el-table-column>

      <!-- 其他 -->
      <template v-for="(item, key) in tableData.columns">
        <!-- 操作按钮 -->
        <el-table-column :key="'a' + key" v-if="item.type == 'btn'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <template v-for="(btn, idx) in item.btns">
              <!-- 3个以内的按钮 -->
              <template v-if="item.btns.length == 3">
                <el-button :key="idx" :size="btn.size || 'small'" :type="btn.type || 'text'" :plain="btn.plain"
                  :disabled="btn.visible" @click.stop="btn.click(scope.$index, scope.row)">
                  {{ btn.label }}
                </el-button>
              </template>
              <!-- 大于3个的按钮 -->
              <template v-else>
                <el-button :key="idx" v-if="idx == 0" :size="btn.size || 'small'" :type="btn.type || 'text'"
                  :plain="btn.plain" :disabled="btn.visible" @click.stop="btn.click(scope.$index, scope.row)">
                  {{ btn.label }}
                </el-button>
                <el-button :key="idx" v-else-if="idx == 1" :size="btn.size || 'small'" :type="btn.type || 'text'"
                  :plain="btn.plain" :disabled="btn.visible" @click.stop="btn.click(scope.$index, scope.row)">
                  {{ btn.label }}
                </el-button>
                <span :key="idx" v-else-if="idx > 2" @click.stop="">
                  <el-dropdown class="more" trigger="click">
                    <el-button :size="btn.size || 'small'" :type="btn.type || 'text'" :plain="btn.plain"
                      :disabled="btn.visible">
                      更多<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                      <template v-for="(btn, idex) in item.btns">
                        <el-dropdown-item :key="idex" v-if="idex >= 2" @click.native="btn.click(scope.$index, scope.row)">
                          {{ btn.label }}
                        </el-dropdown-item>
                      </template>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </template>
            </template>
          </template>
        </el-table-column>

        <!-- 自定义插槽 -->
        <el-table-column :key="'b' + key" v-else-if="item.type == 'slot'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <slot :name="item.title" :row="scope.row"></slot>
          </template>
        </el-table-column>

        <!-- 链接 -->
        <el-table-column :key="'c' + key" v-else-if="item.type == 'link'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <a class="aStyle" v-html="scope.row[item.prop]" @click.stop="item.click(scope.row)">
            </a>
          </template>
        </el-table-column>

        <!-- 缩略图 -->
        <el-table-column :key="'d' + key" v-else-if="item.type == 'img'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <img class="imgStyle" :src="scope.row[item.prop]" @click.stop="item.click(scope.row)">
          </template>
        </el-table-column>

        <!-- Switch 开关 -->
        <el-table-column :key="'e' + key" v-else-if="item.type == 'switch'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <span @click.stop="">
              <el-switch v-model="scope.row[item.prop]" :active-value="1" :inactive-value="0" active-color="#13ce66"
                inactive-color="#ff4949" @change="item.click(scope.row)">
              </el-switch>
            </span>
          </template>
        </el-table-column>

        <!-- 输入框 -->
        <el-table-column :key="'f' + key" v-else-if="item.type == 'input'" :label="item.title" :width="item.width"
          :align="item.align">
          <template slot-scope="scope">
            <el-input v-model="scope.row[item.prop]"></el-input>
          </template>
        </el-table-column>

        <!-- 默认 -->
        <el-table-column :key="'h' + key" v-else :type="item.type" :label="item.title" :width="item.width"
          :align="item.align" :prop="item.prop" :formatter="item.formatter" :sortable="item.sortable"
          :show-overflow-tooltip="true">
        </el-table-column>
      </template>
    </el-table>

    <!-- page -->
    <Page class="page" v-if="tableData.currentPage" :style="{ borderTop: tableData.total == 0 ? '1px solid #EBEEF5' : '' }"
      :total="tableData.total" show-total show-elevator show-sizer :page-size-opts="tableData.sizeOpts"
      :page-size="tableData.pageSize" :current="tableData.currentPage" @on-change="handleCurrentChange"
      @on-page-size-change="handleSizeChange" />
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    tableConfig: {
      type: Object,
      default: () => { }
    },
    tableData: {
      type: Object,
      required: true,
      default: () => { }
    },
    tableHeight: {
      type: String | Number
    }
  },
  data() {
    return {
      expandRowKeys: [],
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    // 多选
    selectAll(selection) {
      this.$emit('selectAll', selection)
    },
    // 单选
    handleRowSelect(currentRow) {
      this.$emit('handleRowSelect', currentRow);
    },
    // 展开当前行
    expandChange(row, expanded) {
      // 展开行
      if (typeof expanded == 'object') {
        if (this.expandRowKeys.includes(row.id)) {
          this.expandRowKeys = this.expandRowKeys.filter(val => val !== row.id);
        } else {
          if (this.expandRowKeys.length != 0) {
            this.expandRowKeys.splice(0, this.expandRowKeys.length);
            this.expandRowKeys.push(row.id);
          } else {
            this.expandRowKeys.push(row.id);
          }
        }
      }
      // 树形表格展开
      if (typeof expanded == 'boolean') {
        if (expanded) {
          this.expandRowKeys.forEach(item => {
            this.$refs.table.toggleRowExpansion(item, false);
          })
          this.expandRowKeys.push(row);
        } else {
          this.expandRowKeys = this.expandRowKeys.filter(item => item.id !== row.id);
        }
      }
    },
    // 分页:每页多少条
    handleSizeChange(val) {
      // this.$emit('handleSize',val);
      this.$emit('freshTableData', {
        pageSize: val,
        currentPage: 1
      })
    },
    // 分页:当前页显示多少条
    handleCurrentChange(val) {
      // this.$emit('handleCurrent',val);
      this.$emit('freshTableData', {
        currentPage: val
      })
    },
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.table_wrapper {
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.tabBtn {
  width: 100%;
  height: 33px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;

  .btnName {
    font-weight: 400;
    font-family: sans-serif;
  }
}

.more {
  margin-left: 10px;
}

.page {
  padding-top: 25px;
}
</style>